<template>
  <div>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column
        v-for="column in visibleColumns"
        :key="column.prop"
        :prop="column.prop"
        :label="column.label"
      >
    </el-table-column>
    </el-table>

    <div>
      <el-checkbox
        v-for="column in columns"
        :key="column.prop"
        :label="column.label"
        v-model="column.visible"
      ></el-checkbox>
    </div>
  </div>
</template>
<script setup>
import { reactive, computed } from "vue";

const columns = reactive([
  { prop: "id", label: "ID", visible: true },
  { prop: "name", label: "Name", visible: true },
  { prop: "age", label: "Age", visible: false },
  { prop: "address", label: "Address", visible: true },
]);

const tableData = reactive([]);

const visibleColumns = computed(() => {
  return columns.filter((column) => column.visible);
});

</script>
